<template>
	<!-- 我的收藏 wwl -->
	<page  ref='page'>
		<view class="page">
			<view class="tab_row">
				<tabRow :list='tabList' @change='changeTab' ref='tabRow' />
			</view>
			<swiper class="tab_data_box" :current='tabIndex' :duration="300" @change="onswiperchange">
				<swiper-item class="tab_data_row" v-for="(ic, i) in tabList" :key="i">
					<!--  @scrolltolower="loadMore" -->
					<scroll-view style='height:100%' enableBackToTop="true" scroll-y="true">
						<view class="list_box">
							<block v-if='total > 0'>
								<view class="list2" v-if=" tabActive == 2"
									:style="{height:heightList && Math.max(...heightList) != 0 ? Math.max(...heightList) + 'rpx' :'200rpx'}">
									<view class="row" v-for="(item,index) in list" :id="`row_${item.id}`" @click="onVideo(item)"
										:style='{top:item.style ? item.style.top : "1000px",left:item.style ? item.style.left : "1000px"}'
										:key='index'>
										<view class="img_box">
											
											<block v-if='item.collect_type == 2'>
												<image :src="item.cover" mode="scaleToFill" v-if='item.collect_type == 2'
													style='height:600rpx'
													class="image" ></image>
												<image src="https://xiaoqu.wuguoxin.vip/uploads/web/TSnh5LubCTshnjSS9mQ9LYrn8yV4asCA3boocVaU.png" mode="" class="icon"></image>
												<view class="title">
													{{item.title}}
												</view>
											</block>
											<block v-if='item.collect_type == 1'>
												<image :src="item.cover" mode="scaleToFill"
													style='height:600rpx'
													class="image" ></image>
												<image src="https://xiaoqu.wuguoxin.vip/uploads/web/TSnh5LubCTshnjSS9mQ9LYrn8yV4asCA3boocVaU.png" mode="" class="icon"></image>
												<view class="title">
													{{item.title}}
												</view>
											</block>
										</view>
										<!-- <view class="name" v-if='item.collect_type == 2'>
											{{item.title}}
										</view> -->
									</view>
								</view>
								<view class="list1" v-else-if="tabActive == 1">
									<view class="row" v-for="(item,index) in list" @click="onArticle(item)">
										<view class="top" :class='item.cover ?  "top2":""'>
											<image class="left" v-if="item.cover" :src="item.cover" mode="scaleToFill"></image>
											<view class="right">
												<view class="title">
													{{item.title}}
												</view>
												<!-- <view class="text">
													{{item.content}}
												</view> -->
											</view>
										</view>
										<view class="bottom">{{item.created_at}}</view>
									</view>
								</view>
								<view class="list3" v-else-if="tabActive == 3">
									<view class="row" v-for="(item,index) in list">
										<view class="left">
											<image :src="item.avatar" mode="scaleToFill" class="image"></image>
											<view class="info">
												<view class="title">
													{{item.name}}
												</view>
												<view class="operation">
													<image
														src="https://xiaoqu.wuguoxin.vip/uploads/web/2Z7ZCcSdj0pqOvT0fV0V0oFoyQrG5lWBzpZshjch.png"
														mode="scaleToFill"></image>
													<text>{{item.like}}</text>
												</view>
											</view>
										</view>
										<view class="right" @click='onshopPage(item,item.id)'>
											进店
										</view>
									</view>
								</view>
								<view class="list4" v-else-if="tabActive == 4">
									<view class="row" v-for="(item,index) in list" @click="onCommodityPage(row)">
										<image :src="item.cover" mode="scaleToFill" class="left"></image>
										<view class="right">
											<view class="title">
												{{item.name}}
											</view>
											<view class="money">
												¥<text>{{item.amount_x}}</text>
											</view>
											<view class="shop" @click.stop="onshopPage(item,item.shopping.id)" v-if="item.collect_type == 9">
												<image src="https://xiaoqu.wuguoxin.vip/uploads/web/shop.png" mode="scaleToFill"></image>
												<text>{{item.shopping.name}}</text>
												<n-icon name="right" size="20" color="#ADADAD"></n-icon>
											</view>
											<view class="btn" @click.stop="onFindSimilarity(item)">
												<text>找相似</text>
											</view>
										</view>
									</view>
								</view>
								<foot />
							</block>
							<empty v-else-if='total == 0 && !loading' />
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
			<u-popup v-model="videoObj.visible" mode='center' width="100%" height="auto" :zIndex='9999' >
				<view class="video_popup">
					<view class="icon">
						<image src="https://xiaoqu.wuguoxin.vip/uploads/web/5WN07zvTmGa33paaFJzrp9j8kBxs6V58GvcvckW4.png" mode="" @click="videoObj.visible = false"></image>
					</view>
					<video :src="videoObj.info.video"  :autoplay="true" :show-fullscreen-btn='false'	
						:ref="`video_${videoObj.info.id}`" class="video">
					</video>
				</view>
			</u-popup>
		</view>
	</page>
</template>

<script>
	import {
		getMyPoster,
		getCollection
	} from '../static/api.js'
	import tabRow from '@/components/tab-row.vue'
	import uPopup from '@/components/u-popup.vue'
	export default {
		components: {
			tabRow,uPopup
		},
		watch:{
		},
		data() {
			return {
				videoObj:{
					visible:false,
					info:{}
				},
				tabList: [{
						id: 1,
						name: "文章"
					},
					{
						id: 2,
						name: "视频",
					},
					{
						id: 3,
						name: "店铺",
					},
					{
						id: 4,
						name: "产品",
					},
					// {
					// 	id: 5,
					// 	name: "工地现场",
					// },

				],
				tabActive: 1,
				tabIndex: 0,
				list: [],
				page: 1,
				total: 0,
				size: 10,
				loading: false,
				listLoading: false,
				heightList: [0, 0],
			}
		},
		methods: {
			onVideo(row){
				this.videoObj.visible = true
				this.videoObj.info = row
			},
			onswiperchange(e) {
				if (this.loading) return
				let index = e.target.current || e.detail.current
				this.switchTab(this.tabList[index].id)
			},
			onArticle(row){
				//1讲述 2找灵感 3平台介绍 4装修流程 5轮播详情 6设计案例 7工地现场 8店铺 9普通商品 10 工长商品
				// 11 工艺标准 12 三方监理 13 新房验收  14 装修攻略
				switch (row.collect_type){
					case 3:
					uni.navigateTo({url:'/pagesHome/platform/platform'})
						break;
					case 4:
						uni.navigateTo({url:"/pagesHome/decorateProcess/decorateProcess"})
						break;
					case 5:
						uni.navigateTo({url:`/pagesHome/richTextDetails?id=${row.id}&type=swiperDetail`})
						break;
					case 6:
						uni.navigateTo({url:`/pagesHome/designCase/details?id=${row.id}`})
						break;
					case 11:
						uni.navigateTo({url:`/pagesHome/Processdetails?id=${row.id}`})
						break;
					case 14:
						uni.navigateTo({url:`/pagesHome/decoratePower/decorateDetail?id=${row.id}`})
						break;					
					default:
						break;
				}
			},
			onshopPage(row,id){//1工长2设计师3建材城4厂商5授权店
				if(row.type == 1 ){
					uni.navigateTo({url:`/pagesCommodity/shopDetailsDefault?type=findDesign&id=${id}`})
				}else if(row.type == 2){
					uni.navigateTo({url:`/pagesCommodity/shopDetailsDefault?type=findCraftsman&id=${id}`})
				}else{
					uni.navigateTo({url:`/pagesCommodity/shopDetailsBuilding?type=buildingMaterialsCity&id=${id}`})
				}
			},
			onFindSimilarity(row){
				uni.navigateTo({url:`/pagesCommodity/findSimilarity?type=${row.type == 1 ? 'findDesign' : row.type == 2 ? 'findCraftsman' : 'buildingMaterialsCity'}&shopping_id=${row.shopping.id}&goods_id=${row.id}`})
			},
			onCommodityPage(row){
				if(row.collect_type == 9){
					if(row.type == 1 ){
						uni.navigateTo({url:`/pagesCommodity/shopDetailsDefault?type=findDesign&id=${row.id}`})
					}else if(row.type == 2){
						uni.navigateTo({url:`/pagesCommodity/information?type=findCraftsman&id=${row.id}`})
					}else{
						uni.navigateTo({url:`/pagesCommodity/information?type=buildingMaterialsCity&id=${row.id}`})
					}
				}else if(row.collect_type ==12){
					uni.navigateTo({url:`/pagesHome/information?type=thirdPartySupervision`})
				}else if(row.collect_type ==13){
					uni.navigateTo({url:`/pagesHome/information?type=newHouseAcceptance`})
				}
				
				
			},
			switchTab(x) {
				var index = this.tabList.findIndex(c => c.id == x)
				if (index == this.tabIndex) return
				this.tabIndex = index
				this.tabActive = x
				this.$refs.tabRow.active = x
				// this.page = 1
				this.total = 0
				this.list = []
				this.heightList = [0, 0]
				this.getList()
			},
			// loadMore() {
			// 	if (this.page * this.size >= this.total || this.listLoading) return
			// 	this.page++
			// 	this.getList()
			// },
			changeTab(x) {
				this.tabActive = x
				this.switchTab(x)
			},
			onDetail(id, img) {

			},
			async getList() {
				this.listLoading = true
				uni.showLoading()
				try {
					var res = await getCollection({
						show_type: this.tabActive
					})
					this.total = res ? res.length : 0
					this.list = res
					if (this.tabActive != 2) {
						this.listLoading = false
					} else {
						setTimeout(()=>{
							this.getDomArea(0)
						},600)
					}
					uni.hideLoading()

				} catch {
					uni.hideLoading()
					this.listLoading = false
				}
			},
			getDomArea(i) {
				if (this.list.length == 0 || this.list.length == i) return
				if (!this.list[i].style) this.list[i].style = {}
				let x = Math.min(...this.heightList)
				let y = this.heightList.indexOf(x)
				this.list[i].style.top = x + 'rpx'
				this.list[i].style.left = y == 0 ? '0rpx' : '348rpx'
				const query = uni.createSelectorQuery().in(this);
				query.select(`#row_${this.list[i].id}`).boundingClientRect(data => {
					this.heightList[y] = x + Number((data.height * 326 / data.width).toFixed(2)) + 20
					if (i != this.list.length - 1) {
						this.getDomArea(i + 1)
					} else {
						 this.listLoading = false
						if (this.page == 1) uni.hideLoading()
						this.$forceUpdate()
					}

				}).exec();

			},
		},
		onReady() {
			this.$refs.tabRow.active = 1
		},
		onLoad() {
			this.getList()
		}

	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
		background-color: #fff;
	}
	.video_popup{
		height:100vh;
		width: 750rpx;
		background-color: #000;
		position: relative;
		box-sizing: border-box;
		padding: 300rpx 0 200rpx;
		.video{
			width: 100%;
			height: 100%;
		}
		.icon{
			position: absolute;
			right: 50rpx;
			top:200rpx;
			image{
				width: 70rpx;
				height: 70rpx;
			}
		}
	}
	.page {
		background-color: #fff;
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100vh;
	}

	.tab_row {
		padding: 40rpx 36rpx 24rpx;
	}

	.tab_data_box {
		flex: 1;

		.tab_data_row {
			flex: 1;
			display: flex;
			flex-direction: column;
		}
	}

	.page_content {
		padding: 40rpx 36rpx 0;
		width: 100%;
		box-sizing: border-box;
	}

	.list_box {
		padding: 0rpx 36rpx;
		width: 100%;
		box-sizing: border-box;

		.list1 {
			.row {
				margin-bottom: 60rpx;
			}

			.top2 {
				margin-bottom: 20rpx;

				.right {
					display: flex;
					justify-content: center;
					flex-direction: column;
				}
			}

			.title {
				font-size: 32rpx;
				line-height: 44rpx;
				color: #26252A;
				margin-bottom: 16rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.text {
				font-size: 24rpx;
				line-height: 34rpx;
				color: #ADADAD;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.top {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.left {
					width: 238rpx;
					height: 128rpx;
					border-radius: 20rpx;
				}

				.right {
					width: calc(100% - 258rpx);
					display: flex;
					justify-content: center;
					flex-direction: column;

				}

			}

			.bottom {
				color: #ADADAD;
				font-size: 18rpx;
				line-height: 26rpx;
			}
		}

		.list2 {
			width: 100%;
			position: relative;
			margin-top: 39rpx;

			.row {
				position: absolute;
				width: 326rpx;
				.img_box{
					width: 326rpx;
					height: auto;
					position: relative;
					box-shadow: 0 2px 6px 2px #ccc;
					    border-radius: 10px;
				}
				.image {
					border-radius: 20rpx;
					width: 326rpx;
					height: 100%;
					display: block;
					margin-bottom: 40rpx;
				}
				.name{
					margin-top: 12rpx;
					font-size: 24rpx;
					line-height: 34rpx;
					font-family: PingFang SC, PingFang SC-Semibold;
					font-weight: 600;
					text-align: left;
					color: #101010;
					margin-bottom: 10rpx;
					display: block;
					overflow: hidden;
					text-overflow: ellispsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.title {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 326rpx;
					height: 44rpx;
					background: rgba(0, 0, 0, .3);
					border-radius: 0rpx 0rpx 22rpx 22rpx;
					font-size: 20rpx;
					color: #E6E6E6;
					line-height: 44rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				
				.icon {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 44rpx;
					height: 44rpx;
				
				}
			}

		}

		.list3 {
			.row {
				width: 100%;
				height: 148rpx;
				background: #ffffff;
				border-radius: 16rpx;
				box-shadow: 0px 4rpx 12rpx 0px rgba(0, 0, 0, 0.16);
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 22rpx;
				box-sizing: border-box;
				margin-bottom: 40rpx;
			}

			.left {
				width: calc(100% - 124rpx);
				display: flex;
				justify-content: space-between;

				.image {
					width: 84rpx;
					height: 84rpx;
					border-radius: 50%;
				}

				.info {
					width: calc(100% - 104rpx);
					display: flex;
					flex-direction: column;
					justify-content: center;

					.title {
						font-size: 32rpx;
						line-height: 44rpx;
						font-weight: 700;
						color: #26252A;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.operation {
						display: flex;
						align-items: center;

						image {
							width: 32rpx;
							height: 32rpx;
						}

						text {
							font-size: 24rpx;
							color: #ADADAD;
							margin-left: 10rpx;
						}
					}
				}
			}

			.right {
				width: 104rpx;
				height: 40rpx;
				border: 2rpx solid #ff7a1f;
				border-radius: 22rpx;
				font-size: 24rpx;
				color: $theme;
				line-height: 40rpx;
				text-align: center;
			}

		}

		.list4 {
			.row {
				width: 100%;
				height: 218rpx;
				background: #ffffff;
				border-radius: 16rpx;
				box-shadow: 0px 4rpx 12rpx 0px rgba(0, 0, 0, 0.16);
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 22rpx;
				box-sizing: border-box;
				margin-bottom: 40rpx;
			}

			.left {
				width: 156rpx;
				height: 156rpx;
			}

			.right {
				width: calc(100% - 176rpx);

				.title {
					font-size: 24rpx;
					line-height: 34rpx;
					font-weight: 700;
					color: #26252A;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.money {
					font-size: 24rpx;
					line-height: 44rpx;
					color: #FF2F2F;
					margin-bottom: 6rpx;

					text {
						font-size: 30rpx;
						font-weight: 700;
						margin-left: 4rpx;
					}
				}

				.shop {
					display: flex;
					align-items: center;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 2rpx;
					}

					text {
						font-size: 18rpx;
						line-height: 26rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						max-width: 70%;
					}

				}

				.btn {
					margin-top: 6rpx;
					display: flex;
					justify-content: flex-end;

					>text {
						display: inline-block;
						width: 104rpx;
						height: 40rpx;
						border: 2rpx solid #ff7a1f;
						border-radius: 22rpx;
						color: $theme;
						font-size: 24rpx;
						line-height: 40rpx;
						text-align: center;
					}
				}
			}

		}
	}
</style>
